<template>
	<view class="page-container">
		<!-- 顶部操作栏 -->
		<view class="page-header">
			<view class="header-left">
				<text class="page-title">删除医生</text>
				<text class="page-subtitle">确认删除操作</text>
			</view>
		</view>

		<!-- 加载中状态 -->
		<view v-if="pageLoading" class="loading-state">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 删除确认 -->
		<view v-else class="delete-section">
			<!-- 警告提示 -->
			<view class="warning-box">
				<text class="warning-icon">⚠️</text>
				<text class="warning-title">删除确认</text>
				<text class="warning-text">此操作不可撤销，删除后相关数据将永久丢失</text>
			</view>

			<!-- 医生信息 -->
			<view class="info-box">
				<view class="info-title">待删除的医生信息</view>

				<view class="info-row">
					<text class="info-label">医生名称</text>
					<text class="info-value">{{ doctor.doctor_name }}</text>
				</view>

				<view class="info-row">
					<text class="info-label">专科</text>
					<text class="info-value">{{ doctor.specialty }}</text>
				</view>

				<view class="info-row">
					<text class="info-label">电话</text>
					<text class="info-value">{{ doctor.phone }}</text>
				</view>

				<view class="info-row">
					<text class="info-label">邮箱</text>
					<text class="info-value">{{ doctor.email || '-' }}</text>
				</view>

				<view class="info-row">
					<text class="info-label">状态</text>
					<text class="info-value">
						<text class="status-badge" :class="'status-' + (doctor.status === 1 ? 'active' : 'inactive')">
							{{ doctor.status === 1 ? '启用' : '禁用' }}
						</text>
					</text>
				</view>
			</view>

			<!-- 确认复选框 -->
			<view class="checkbox-section">
				<label class="checkbox-label">
					<input 
						type="checkbox" 
						v-model="confirmDelete"
						class="checkbox"
					/>
					<text>我已确认要删除此医生及相关数据</text>
				</label>
			</view>

			<!-- 操作按钮 -->
			<view class="action-section">
				<button 
					class="btn btn-danger"
					:disabled="!confirmDelete || loading"
					@click="handleConfirmDelete"
				>
					确认删除
				</button>
				<button class="btn btn-default" @click="handleCancel">取消</button>
			</view>
		</view>
	</view>
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'

const route = useRoute()
const id = ref(route.query.id)
const pageLoading = ref(false)
const loading = ref(false)
const confirmDelete = ref(false)
const doctor = reactive({
	_id: '',
	doctor_name: '',
	specialty: '',
	phone: '',
	email: '',
	status: 1
})

onMounted(() => {
	loadData()
})

async function loadData() {
	pageLoading.value = true
	try {
		const dhDoctors = uniCloud.importObject('dh-doctors')
		const result = await dhDoctors.getDoctor(id.value)
		
		if (result.code === 200) {
			Object.assign(doctor, result.data)
		} else {
			uni.showToast({ title: result.message || '加载失败', icon: 'error' })
		}
	} catch (error) {
		console.error('加载医生数据失败:', error)
		uni.showToast({ title: '加载医生数据失败', icon: 'error' })
	} finally {
		pageLoading.value = false
	}
}

async function handleConfirmDelete() {
	if (!confirmDelete.value) {
		uni.showToast({ title: '请确认删除', icon: 'warning' })
		return
	}

	loading.value = true
	try {
		const dhDoctors = uniCloud.importObject('dh-doctors')
		const result = await dhDoctors.deleteDoctor(id.value)
		
		if (result.code === 200) {
			uni.showToast({ title: '删除成功', icon: 'success' })
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		} else {
			uni.showToast({ title: result.message || '删除失败', icon: 'error' })
		}
	} catch (error) {
		console.error('删除医生失败:', error)
		uni.showToast({ title: '删除医生失败', icon: 'error' })
	} finally {
		loading.value = false
	}
}

function handleCancel() {
	uni.navigateBack()
}
</script>

<style scoped lang="scss">
.page-container {
	padding: 20px;
	background-color: #f5f7fa;
	min-height: 100vh;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-left {
	display: flex;
	flex-direction: column;
}

.page-title {
	font-size: 20px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 4px;
}

.page-subtitle {
	font-size: 12px;
	color: #6b7280;
}

.loading-state {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-text {
	font-size: 14px;
	color: #6b7280;
}

.delete-section {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
}

.warning-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border-left: 4px solid #ef4444;
}

.warning-icon {
	font-size: 48px;
	margin-bottom: 12px;
}

.warning-title {
	font-size: 18px;
	font-weight: 600;
	color: #7f1d1d;
	margin-bottom: 8px;
}

.warning-text {
	font-size: 14px;
	color: #991b1b;
	text-align: center;
}

.info-box {
	padding: 20px;
	border-bottom: 1px solid #e5e7eb;
}

.info-title {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #3b82f6;
	display: inline-block;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;

	&:last-child {
		border-bottom: none;
	}
}

.info-label {
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
	min-width: 100px;
}

.info-value {
	font-size: 14px;
	color: #1f2937;
	text-align: right;
	flex: 1;
}

.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;

	&.status-active {
		background-color: #d1fae5;
		color: #065f46;
	}

	&.status-inactive {
		background-color: #fee2e2;
		color: #7f1d1d;
	}
}

.checkbox-section {
	padding: 20px;
	border-bottom: 1px solid #e5e7eb;
	background-color: #fafafa;
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	color: #1f2937;
}

.checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.action-section {
	display: flex;
	gap: 12px;
	padding: 20px;
}

.btn {
	flex: 1;
	padding: 12px 16px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&.btn-danger {
		background-color: #ef4444;
		color: white;

		&:active:not(:disabled) {
			background-color: #dc2626;
		}
	}

	&.btn-default {
		background-color: #e5e7eb;
		color: #374151;

		&:active {
			background-color: #d1d5db;
		}
	}
}
</style>
